<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('xBjhead.quick Search Fields') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <popupTabs />


        <el-dialog v-model="dialogFormVisible" title="报价单状态" :width="500">
            <el-form :model="form" :label-width="formLabelWidth" style="padding-right:70px">
            <el-form-item label="报价单号" >
                <el-input v-model="form.BJNO" autocomplete="off" :disabled="true"/>
            </el-form-item>
            <FormItem 
                :label="'报价单状态'" 
                v-model="form.BJSTATUS" 
                prop="COSTTYPE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=bjstatus'
                }"
            />
            <FormItem :label="'有效期结束日期'" 
            type="datetime" 
            v-model="form.ENDDATE" 
            prop="OPTIME" 
            :input-attr="{ placeholder: '请选择' }" />
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="statusChange">
                确认
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted , h, markRaw, resolveComponent,reactive} from 'vue'
import baTableClass from '/@/utils/baTable'
import { xBjhead ,codelib } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import popupTabs from './popupTabs.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import FormItem from '/@/components/formItem/index.vue'


const { t } = useI18n()
const tableRef = ref()

const optButtons = defaultOptButtons(["edit","delete"])

const renderStatus = {
    render(context:any){
        let status = {'0':'制作中','1':'已接受','2':'已驳回','3':'已失效'}
        let text = status[context.$attrs.renderRow.BJSTATUS] ||'-'
        return h(resolveComponent('el-button'),{
            type:"primary",
            plain:true,
            onClick:()=>{
                let row = context.$attrs.renderRow
                dialogFormVisible.value = true
                form.BJNO = row.BJNO
                form.BJSTATUS = row.BJSTATUS
                form.ENDDATE = row.ENDDATE
                // console.log(context.$attrs.renderRow,context.$attrs.renderValue)
            }
        },text)
    }
}

// gstype 1客户 2供应商
// type 1常规 2线路
// bjno 报价号

const route = useRoute()
const gstype = route.name === 'xBjhead/customer'||route.name === 'xBjhead/customer/approve'? 1:2
provide('gstype',gstype)
const isApprove = route.name.indexOf('approve')>0
provide('isApprove',isApprove)
if(!isApprove){
    optButtons.forEach(item=>{
        item.display = (row:any)=>{
            if(row.status=='待审批'||row.status=='已完成'){
                return false
            }else{
                return true
            }
        }
    })
}

const baTable = new baTableClass(
    new baTableApi(xBjhead,isApprove?'':''),
    {
        pk: 'BJNO',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('xBjhead.CORP'), prop: 'CORP', align: 'center' },
            { label: t('xBjhead.CORPNAME'), prop: 'CORPNAME', align: 'center',show:false },
            { label: t('xBjhead.BJNO'), prop: 'BJNO', align: 'center' },
            { label: t('xBjhead.BJDATE'), prop: 'BJDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('xBjhead.BJTYPE'), prop: 'codename', align: 'center' },
            { label: t('xBjhead.YWTYPE'), prop: 'YWTYPE', align: 'center' },
            { label: t('xBjhead.STARTDATE'), prop: 'STARTDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160,show:false },
            { label: t('xBjhead.ENDDATE'), prop: 'ENDDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('xBjhead.CONTRACTNO'), prop: 'CONTRACTNO', align: 'center' },
            { label: t('xBjhead.GOODS'), prop: 'GOODS', align: 'center' },
            { label: t('xBjhead.GOODSID'), prop: 'GOODSID', align: 'center',show:false },
            { label: t('xBjhead.GOODSKIND'), prop: 'GOODSKIND', align: 'center',show:false },
            { label: t('xBjhead.TRANSLINE'), prop: 'TRANSLINE', align: 'center',show:false },
            { label: t('xBjhead.TRANSLINETO'), prop: 'TRANSLINETO', align: 'center',show:false },
            // { label: t('xBjhead.BJSTATUS'), 
            //     prop: 'BJSTATUS', 
            //     align: 'center',
            //     render:'tag',
            //     replaceValue:{'0':'制作中','1':'已接受','2':'已驳回','3':'已失效'},
            // },
            { label: t('xBjhead.BJSTATUS'), prop: 'BJSTATUS', render: 'customRender', customRender: markRaw(renderStatus) },
            { label: t('xBjhead.SALES'), prop: 'SALES', align: 'center',show:false },
            { label: t('xBjhead.CORPTYPE'), prop: 'CORPTYPE', align: 'center',show:false },
            { label: t('xBjhead.CORPCONTACT'), prop: 'CORPCONTACT', align: 'center',show:false },
            { label: t('xBjhead.CORPCOPYTO'), prop: 'CORPCOPYTO', align: 'center',show:false },
            { label: t('xBjhead.CORPTELE'), prop: 'CORPTELE', align: 'center' ,show:false},
            { label: t('xBjhead.CORPFAX'), prop: 'CORPFAX', align: 'center',show:false },
            { label: t('xBjhead.CORPEMAIL'), prop: 'CORPEMAIL', align: 'center',show:false },
            { label: t('xBjhead.CORPADDR'), prop: 'CORPADDR', align: 'center',show:false },
            { label: t('xBjhead.UNNO'), prop: 'UNNO', align: 'center',show:false },
            { label: t('xBjhead.MIDU'), prop: 'MIDU', align: 'center',show:false },
            { label: t('xBjhead.SAFEGWET'), prop: 'SAFEGWET', align: 'center',show:false },
            { label: t('xBjhead.SAFEGWETTO'), prop: 'SAFEGWETTO', align: 'center',show:false },
            { label: t('xBjhead.TRANSDAYS'), prop: 'TRANSDAYS', align: 'center',show:false },
            { label: t('xBjhead.CONTYPE'), prop: 'CONTYPE', align: 'center',show:false },
            { label: t('xBjhead.ALLTYPE'), prop: 'ALLTYPE', align: 'center',show:false },
            { label: t('xBjhead.TANKTYPE'), prop: 'TANKTYPE', align: 'center',show:false },
            { label: t('xBjhead.TANKCBM'), prop: 'TANKCBM', align: 'center',show:false },
            { label: t('xBjhead.TANKDEMO'), prop: 'TANKDEMO', align: 'center',show:false },
            { label: t('xBjhead.PAYDAYS'), prop: 'PAYDAYS', align: 'center',show:false },
            { label: t('xBjhead.FUELPRICE'), prop: 'FUELPRICE', align: 'center',show:false },
            { label: t('xBjhead.MFDS'), prop: 'MFDS', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.XHMFDS'), prop: 'XHMFDS', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.DSF'), prop: 'DSF', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.XHDSF'), prop: 'XHDSF', align: 'center', operator: 'RANGE' ,show:false},
            { label: t('xBjhead.GYF'), prop: 'GYF', align: 'center', operator: 'RANGE' ,show:false},
            { label: t('xBjhead.QYGMFYX'), prop: 'QYGMFYX', align: 'center', operator: 'RANGE' ,show:false},
            { label: t('xBjhead.MDGMFYX'), prop: 'MDGMFYX', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.ZQF'), prop: 'ZQF', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.ZQFBZ'), prop: 'ZQFBZ', align: 'center' ,show:false},
            { label: t('xBjhead.QYGMFDC'), prop: 'QYGMFDC', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.MDGMFDC'), prop: 'MDGMFDC', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.QYGDCF'), prop: 'QYGDCF', align: 'center', operator: 'RANGE' ,show:false},
            { label: t('xBjhead.QYGDCFBZ'), prop: 'QYGDCFBZ', align: 'center' ,show:false},
            { label: t('xBjhead.DCF'), prop: 'DCF', align: 'center', operator: 'RANGE',show:false },
            { label: t('xBjhead.DCFBZ'), prop: 'DCFBZ', align: 'center',show:false },
            { label: t('xBjhead.OP'), prop: 'OP', align: 'center',show:false },
            { label: t('xBjhead.OPTIME'), prop: 'OPTIME', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 ,show:false},
            { label: '审批状态', prop: 'status', align: 'center' },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'BJNO', order: 'desc' },
    },
    {
        defaultItems: [],
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    // type 1 为客户 2 为供应商
    baTable.table.filter!.gstype = gstype
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    BJNO: '',
    BJSTATUS: '',
    ENDDATE: '',
})


const statusChange = ()=>{
    createAxios({
        url: xBjhead +'upstatus',
        method:'POST',
        data:form
    }).then((res:any)=>{
        dialogFormVisible.value = false
        baTable.getIndex()
    })
    console.log(form)
    
}





</script>

<script lang="ts">
import { defineComponent } from 'vue'
import createAxios from '/@/utils/axios'
export default defineComponent({
    name: 'xBjhead',
})
</script>

<style scoped lang="scss"></style>
